<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		pickupApi
	} from '@/apis/task.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	// 任务 id
	let id = ''
	onLoad((params) => {
		id = params.id
	})
	// 1. 上传和校验
	// 回单上传变量
	const comeImgs = ref([])
	// 货品上传变量
	const goodImgs = ref([])

	// 兜底校验: true 校验通过-不禁用 ｜ false 校验不通过-禁用
	const isSubmitOk = computed(() => {
		return comeImgs.value.length > 0 && goodImgs.value.length > 0
	})
	//  2. 提交
	const submit = async () => {
		/**
		 * 1. 处理参数图片数据
		 * 2. 调用提货 api
		 * 3. 跳转到任务详情页面
		 */
		const data = {
			id,
			// 回单凭证
			cargoPickUpPictureList: comeImgs.value.map(item => ({
				url: item.url
			})),
			//  货品照片
			cargoPictureList: goodImgs.value.map(item => ({
				url: item.url
			}))
		}
		await pickupApi(data)
		uni.reLaunch({
			url: '/subpkg_task/detail/index?id=' + id
		})

	}
</script>
<template>
	<view class="page-container">
		<view class="receipt-info">
			<!--  云上传的组件uni-file-picker（ 这个组件内部会自动关联项目开通的云空间 ）
			 limit 控制上传数量
			 title 上传提示内容
			 file-extname 校验上传图片格式
			 v-model 存储上传图片的结果和回显
			 -->
			<uni-file-picker v-model="comeImgs" file-extname="jpg,webp,gif,png" limit="3" title="请拍照上传回单凭证"></uni-file-picker>
			<uni-file-picker v-model="goodImgs" file-extname="jpg,webp,gif,png" limit="3" title="请拍照上传货品照片"></uni-file-picker>
		</view>
		<button :disabled="!isSubmitOk" @click="submit" class="button">提交</button>
	</view>
</template>

<style lang="scss" scoped>
	.page-container {
		padding: 30rpx;
	}

	.receipt-info {
		min-height: 600rpx;
		background-color: #fff;
		padding: 20rpx 30rpx;
		border-radius: 16rpx;

		::v-deep .uni-file-picker {
			margin-bottom: 30rpx;
		}
	}

	.button {
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		/* #ifdef APP */
		padding-top: 4rpx;
		/* #endif */
		border-radius: 100rpx;
		margin-top: 60rpx;
		color: #fff;
		font-size: $uni-font-size-big;
		background-color: $uni-primary;

		&[disabled],
		&.disabled {
			color: #fff;
			background-color: #fadcd9;
		}
	}
</style>